<script>
export default {
    props: {
        show: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            required: false,
            default: ''
        }
    },
    data() {
        return {
            safeAreaInsets: {}
        }
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    methods: {
        onClose() {
            this.$emit('onClose')
        }
    }
}

</script>

<template>
    <u-popup
        :show="show"
        :safeAreaInsetBottom="false"
        :customStyle="{
            width: '92%',
            height: '40vh',
            background: '#fff',
            margin: `0 auto ${20 + safeAreaInsets.bottom}rpx`,
            borderRadius: '40rpx',
            padding: '50rpx',
            boxSizing: 'border-box'
        }"
        :overlayStyle="{
            background: '#0A0A0A99'
        }"
        closeable
        @close="onClose"
    >
        <view>
            <view
                v-if="!!title"
                class="text w-fill"
                style="font-size: 32rpx; font-weight: 500; text-align: center; margin-bottom: 30rpx"
            >
                {{ title }}
            </view>
            <view style="padding: 30rpx 0">
                <slot />
            </view>
        </view>
    </u-popup>
</template>

<style scoped>

</style>
